<template>
  <div>
    <div style="background-color:#fff">
      <div class="div" :style="{height: divHeight}">
        <img class="background-image" :src="courseScope.imgUrl">
      </div>
      <div><img class="titles" :style="{width: initTitlesWidth,left: initMarginLeft30px,right: initTitlesRight,fontSize: initTitleFontSize,height: titlesHeight200,top: titlesTop100}" :src="courseScope.imgUrl"></div>
      <div class="title-font" :style="{marginLeft: initTitleMarginLeft,fontSize: initTitleFontSize,top: titleFontTop}">{{courseScope.name}}</div>
      <div class="head-div" :style="{marginLeft: initHeadImageMarginLeft,marginTop: headDivMarginTop,lineHeight: headDivLineHeight}">
        <img class="head-image" :style="{height: headImageHeight,width: headImageWidth}" :src="courseScope.lecturerImgUrl">
        <div class="head-image-message" :style="{fontSize: initHeadImageMessageFontSize,paddingLeft: initHeadImageMessagePaddingLeft}">{{courseScope.nickName}}</div>
      </div>
      <div class="isStartFont-color head-isBeginhead-isBegin" v-show="courseScope.isBegin === 0" :style="{width: initHeadIsbeginwidth,height: initHeadIsbeginHeight,fontSize: initHeadIsBeginFontSize,marginRight: initHeadIsBeginMarginRight,marginTop: initHeadIsBeginHeadIsBeginMarginTop,lineHeight: initHeadIsBeginHeadIsBeginLineHeight}">未开始</div>
      <div class="isEndFont-color head-isBeginhead-isBegin" v-show="courseScope.isBegin === 1" :style="{width: initHeadIsbeginwidth,height: initHeadIsbeginHeight,fontSize: initHeadIsBeginFontSize,marginRight: initHeadIsBeginMarginRight,marginTop: initHeadIsBeginHeadIsBeginMarginTop,lineHeight: initHeadIsBeginHeadIsBeginLineHeight}">已结束</div>
      <div class="time" :style="{height: timeHeight,lineHeight: timeLineHeight,marginLeft: timeMarginLeft,marginRight: timeMarginRight,marginTop: timeMarginTop,fontSize: timeFontSize}"><span>{{courseScope.startTime | formatDate}}   {{courseScope.startTime | formatDateHM}}~{{courseScope.endTime | formatDateHM}}</span></div>
      <div class="home-title" :style="{height: timeHeight,lineHeight: timeLineHeight,marginLeft: timeMarginLeft,marginRight: timeMarginRight,fontSize: timeFontSize}">{{courseScope.address}}</div>
      <div class="lecturer-title-div" :style="{marginTop:initMarginTop30px,marginLeft: initMarginLeft30px,marginRight: initMarginLeft30px}">
        <div class="lecturer-title" :style="{height: lecturerTitleDivLineHeight}">讲师简介</div>
        <div class="lecturer-message" :style="{marginTop: timeMarginLeft,fontSize: lecturerMessageFontSize}">{{courseScope.lecturerMemo}}</div>
      </div>
      <div :style="{marginTop:initMarginTop30px,marginLeft:initMarginLeft30px,marginRight: initMarginLeft30px}">
        <div class="lecturer-title" :style="{height: lecturerTitleDivLineHeight}">课程简介</div>
        <div class="lecturerCourse-message" :style="{marginTop: timeMarginLeft,fontSize: lecturerMessageFontSize}"><div v-html='courseScope.detail'></div></div>
      </div>
    </div>
    <div class="lecturer-enroll-div" :style="{height: lecturerEnrollDivHeight,marginTop: lecturerEnrollDivMarginTop}">
      <div class="lecturer-enroll-title" :style="{fontSize: timeFontSize,marginRight:initHeadIsBeginMarginRight,marginTop: initHeadIsBeginMarginRight,marginLeft: initHeadIsBeginMarginRight,paddingTop: initHeadIsBeginMarginRight}">报名（{{courseScope.applayNum}}）</div>
      <div class="n-imgDiv" :style="{marginLeft: initHeadIsBeginMarginRight,marginTop:initMarginTop30px,marginRight: initHeadIsBeginMarginRight,height: headBigImageHeight}">
        <img v-for="student in studentList" v-bind:key="student.id" class="head-big-image" :src="student.imgUrl" :style="{height: headBigImageHeight,width: headBigImageWidth}">  
      </div>
    </div>

    <div v-show="courseScope.isBegin === 1" :style="{marginButtom: initCourseMarginBottom}">
    <div class="qrCode-div" :style="{marginTop:initMarginTop30px}">
      <div :style="{marginLeft: initMarginLeft30px,width: qrcodeMarginWidth}">
        <div class="lecturer-title">签到二维码</div>
        <vue-qr :text="courseScope.signCode" :size="size" :colorDark="colorDark" :style="{marginLeft: initMarginLeft_30px}"></vue-qr>
      </div>
      <div :style="{marginLeft: initMarginLeft30px,width: qrcodeMarginWidth}">
        <div class="lecturer-title">评分二维码</div>
        <vue-qr :text="courseScope.gradeCode" :size="size" :colorDark="colorDark" :style="{marginLeft: initMarginLeft_30px}"></vue-qr>
      </div>
    </div>

    <div class="grade-parent-div" :style="{marginTop:initMarginTop30px}">
      <div style="width: 100%;" :style="{paddingLeft: initHeadIsBeginMarginRight, paddingRight: initHeadIsBeginMarginRight}">
      <div class="lecturer-title">评分简介</div>
        <div  v-for="courseRate in courseRateList" v-bind:key="courseRate-1" :style="{height: gradeDivHeight,marginTop: gradeDivMarginTop}">
          <div class="grade-name" :style="{fontSize: lecturerMessageFontSize}">{{courseRate.name}}</div>
          <div class="grade-score" :style="{fontSize: lecturerMessageFontSize}">{{courseRate.score}}</div>
        </div>
      </div>
    </div>

    <div v-for="courseRateOne in courseRateListOne" v-bind:key="courseRateOne-1" class="qrCode-div" :style="{marginTop:initMarginTop30px}">
      <div :style="{marginLeft: initMarginLeft30px,width: qrcodeMarginWidth}">
          <div class="lecturer-title" :style="{marginTop: timeMarginRight,fontSize: timeFontSize}">{{courseRateOne.name}}</div>
          <div v-for="courseRateDetail in courseRateOne.courseRateDetail" v-bind:key="courseRateDetail-1" class="grade">{{courseRateDetail.value}}</div>    
      </div>
    </div>
    <div class="n-isStop-button-div" :style="{marginTop: lecturerTitleDivMarginRight}"><mt-button class="n-isStop-button" :style="{height: nIsStopButtonHeight,lineHeight: nIsStopButtonHeight,fontSize: gradeDivMarginTop}" type="default">已结束</mt-button></div>
    </div>
    <div :style="{height: buttomHeight}"></div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import { fetchCourseDetailById } from '@/api/course'
import { fetchListZero, fetchListOne } from '@/api/courseRate'
import { parseTime } from '@/utils/date'
export default {
  components: {
    VueQr
  },
  data () {
    return {
      courseScope: {},
      studentList: [],
      courseRateList: [],
      courseRateListOne: [],
      size: '181',
      colorDark: 'black'
    }
  },
  mounted () {
    this.getCourseDetailById()
    this.getRateNameByTypeOne()
    this.getRateNameByTypeZero()
  },
  filters: {
    formatDate (time) {
      if (time === null) {
        return '--'
      }
      var date = new Date(time)
      return parseTime(date, '{y}-{m}-{d}')
    },
    formatDateHM (time) {
      if (time === null) {
        return '--'
      }
      var date = new Date(time)
      return parseTime(date, '{h}:{i}')
    }
  },
  computed: {
    initCourseMarginBottom () {
      return this.clientWidth * 113 / 750 + 'px'
    },
    initTitlesWidth () {
      return this.clientWidth * 290 / 750 + 'px'
    },
    initMarginLeft30px () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    headDivLineHeight () {
      return this.clientWidth * 62.5 / 750 + 'px'
    },
    initMarginLeft_30px () {
      return this.clientWidth * -30 / 750 + 'px'
    },
    initMarginTop30px () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    initTitlesRight () {
      return this.clientWidth * 10 / 750 + 'px'
    },
    initTitleFontSize () {
      return this.clientWidth * 36 / 750 + 'px'
    },
    initTitleMarginLeft () {
      return this.clientWidth * 350 / 750 + 'px'
    },
    initHeadImageMarginLeft () {
      return this.clientWidth * 350 / 750 + 'px'
    },
    initHeadImageMessageFontSize () {
      return this.clientWidth * 28 / 750 + 'px'
    },
    initHeadIsbeginHeight () {
      return this.clientWidth * 44 / 750 + 'px'
    },
    initHeadIsBeginHeadIsBeginLineHeight () {
      return this.clientWidth * 44 / 750 + 'px'
    },
    initHeadIsBeginHeadIsBeginMarginTop () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    initHeadIsbeginwidth () {
      return this.clientWidth * 105 / 750 + 'px'
    },
    initHeadImageMessagePaddingLeft () {
      return this.clientWidth * 8 / 750 + 'px'
    },
    initHeadIsBeginFontSize () {
      return this.clientWidth * 20 / 750 + 'px'
    },
    initHeadIsBeginMarginRight () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    titlesHeight200 () {
      return this.clientWidth * 200 / 750 + 'px'
    },
    titlesTop100 () {
      return this.clientWidth * 100 / 750 + 'px'
    },
    titleFontTop () {
      return this.clientWidth * 130 / 750 + 'px'
    },
    divHeight () {
      return this.clientWidth * 211 / 750 + 'px'
    },
    headImageHeight () {
      return this.clientWidth * 50 / 750 + 'px'
    },
    headImageWidth () {
      return this.clientWidth * 50 / 750 + 'px'
    },
    headBigImageHeight () {
      return this.clientWidth * 80 / 750 + 'px'
    },
    headBigImageWidth () {
      return this.clientWidth * 80 / 750 + 'px'
    },
    headDivMarginTop () {
      return this.clientWidth * 29.2 / 750 + 'px'
    },
    headIsBeginHeight () {
      return this.clientWidth * 44 / 750 + 'px'
    },
    headIsBeginLineHeight () {
      return this.clientWidth * 55 / 750 + 'px'
    },
    timeHeight () {
      return this.clientWidth * 87 / 750 + 'px'
    },
    timeLineHeight () {
      return this.clientWidth * 87 / 750 + 'px'
    },
    timeMarginLeft () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    timeMarginRight () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    timeMarginTop () {
      return this.clientWidth * 126 / 750 + 'px'
    },
    timeFontSize () {
      return this.clientWidth * 26 / 750 + 'px'
    },
    lecturerTitleDivLineHeight () {
      return this.clientWidth * 46 / 750 + 'px'
    },
    lecturerMessageFontSize () {
      return this.clientWidth * 24 / 750 + 'px'
    },
    lecturerEnrollDivHeight () {
      return this.clientWidth * 300 / 750 + 'px'
    },
    lecturerEnrollDivMarginTop () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    qrcodeMarginWidth () {
      return this.clientWidth * 345 / 750 + 'px'
    },
    gradeDivHeight () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    gradeDivMarginTop () {
      return this.clientWidth * 31 / 750 + 'px'
    },
    nIsStopButtonLineHeight () {
      return this.clientWidth * 40 / 750 + 'px'
    },
    nIsStopButtonHeight () {
      return this.clientWidth * 100 / 750 + 'px'
    },
    buttomHeight () {
      return this.clientWidth * 118 / 750 + 'px'
    }
  },
  methods: {
    getCourseDetailById () {
      let id = this.$route.query
      fetchCourseDetailById(id).then(response => {
        this.courseScope = response.data
        this.studentList = this.courseScope.studentList
      })
    },
    getRateNameByTypeZero () {
      let id = this.$route.query
      fetchListZero(id).then(response => {
        this.courseRateList = response.data
      })
    },
    getRateNameByTypeOne () {
      let id = this.$route.query
      fetchListOne(id).then(response => {
        this.courseRateListOne = response.data
      })
    }
  }
}
</script>

<style>
  .titles{
    position:absolute;
    color: #FFFFff;
    position: absolute;
  }
  .title-font{
    color: #FFFFff;
    position: absolute;
  }
  .div{
    width:100%;
    overflow:hidden
  }
  .background-image{
    width: 100%;
    background-repeat: no-repeat;
    background-size:100% 100%;
    -webkit-filter: blur(20px); /* Chrome, Opera */
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);    
    filter: blur(20px);  
    display: block; 
  }
  .head-image{
    border-radius:50%; 
  }
  .head-big-image{
    border-radius:50%; 
  }
  .head-div{
    float: left;
  }
  .head-image-message{
    float: right;
    color: #5B6175;
  }
  /* .head-isBegin{
    height: 44px;
    line-height: 55px;
    text-align: center;
    border-radius: 5px;
    float: right;
  } */
  .time{
    color: #5B6175;
    font-weight: bold;
    border-bottom:1px solid #5B6175;
  }
  .home-title{
    color: #5B6175;
    font-weight: bold;
    border-bottom:1px solid #5B6175;
  }
  .lecturer-title-div{
    border-bottom:1px solid #5B6175;
  }
  .lecturer-title{
    font-weight: bold;
    color: #5B6175;
  }
  .head-isBeginhead-isBegin{
    float: right;
    text-align: center;
  }
  .lecturer-message{
    color: #5B6175;
    font-family: 微软雅黑;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .lecturerCourse-message{
    color: #5B6175;
    font-family: 微软雅黑;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
  }
  .lecturer-enroll-div{
    background-color: #ffffff;
  }
  .lecturer-enroll-title{
    font-weight: bold;
    color: #5B6175;
  }
  .qrCode-div{
      background-color: white;
      display: flex;
  }
  .grade-parent-div{
    background-color: white;
    display: flex;
  }

  .grade-name{
    color: #5B6175;
    float:left;
  }
  .grade-score{
    color: #5B6175;
    float:right;
  }
  .n-isStop-button-div{
      text-align: center;
  }
  .n-isStop-button{
      width: 100%;
      color: #ffffff;
      background-color: #BDBED3;
  }
  .n-imgDiv {
    float: left;
    width: 100%;
  }
</style>
